/* eslint-disable no-self-compare */

import React from 'react'
import { Flex, Toast } from 'antd-mobile'
import { List,AutoSizer,
  WindowScroller,  InfiniteLoader} from 'react-virtualized'
// 导入axios
import { API } from '../../utils/api'
import { BASE_URL } from '../../utils/url'
import { getCurrentCity } from '../../utils'
// 导入组件
import SearchHeader from '../../components/SearchHeader'
import Filter from './components/Filter'
import NoHouse from '../../components/NoHouse'
// 导入吸顶组件
import Sticky from '../../components/Sticky'
// 导入样式
import './index.css'
import HouseItem from '../../components/HouseItem'
// 导入样式
// import styles from './index.module.css'
export default class HouseList extends React.Component{
    // 初始化状态
    state = {
        // 列表数据
        list:[],
        // 总条数
        count:0,
        // 数据是否加载中
        isLoading: false
    }
    // 初始化实例属性
    filters = {}
    // 生命周期调用方法
    async componentDidMount(){
        const { label, value } = await getCurrentCity()
        this.label = label
         this.value = value
        this.getHouseList()
    }
    // 获取房屋列表数据方法
    async getHouseList(){
        try {
           this.setState({
                isLoading: true
            })
          // 开启loading效果
            Toast.loading('数据加载中...', 0, null, false)
            // 获取当前城市定位的id
            // const { value } =localStorage.getItem('hkzf_city')
            const res =await API.get('/houses',{
                params:{
                    cityId:this.value, 
                    ...this.filters,
                    start:1,  
                    end:20
                }
            })
            Toast.hide()
            const { list, count } = res.data.body
             // 提示房源数量
            // 解决了没有房源数据时，也弹窗提示的bug
            if (count !== 0) {
              Toast.info(`共找到 ${count} 套房源`, 2, null, false)
            }
            this.setState({
                list, 
                count,
                // 数据加载完成的状态
                isLoading: false
            })
        } catch (error) {
           Toast.hide()
        }
    }
    // 接受Filters组件中的筛选条件数据
    onFilter = (filters) => {
        //返回顶部
        window.scroll(0, 0) 
        this.filters = filters
        // 调用获取房屋列表数据的方法
       this.getHouseList()
    }
    // 渲染每一行数据的渲染函数
    renderHouseList = ({
        index, //索引号
        key, //当前项的key值
        style, //当前行的样式属性
    }) => {
        // 根据索引号获取当前这一行的数据
        const { list }= this.state
        const house = list[index]
        // 判断 house 是否存在
    // 如果不存在，就渲染 loading 元素占位
    if (!house) {
      return (
        <div key={key} style={style}>
          <p className='loading' />
        </div>
      )
    }
        return (
            <HouseItem 
            key={key} 
            onClick={() => this.props.history.push(`/detail/${house.houseCode}`)}
            style={style}
            src={BASE_URL + house.houseImg}
            title={house.title}
            desc={house.desc}
            tags={house.tags}
            price={house.price}
            />
        )
    }
    
  // 判断列表中的每一行是否加载完成
  isRowLoaded = ({ index }) => {
    return !!this.state.list[index]
  }
  // 用来获取更多房屋列表数据
  // 注意：该方法的返回值是一个 Promise 对象，并且，这个对象应该在数据加载完成时，
  // 来调用 resolve 让Promise对象的状态变为已完成。
  loadMoreRows = ({ startIndex, stopIndex }) => {
    return new Promise(resolve => {
      API.get('/houses', {
        params: {
          cityId: this.value,
          ...this.filters,
          start: startIndex,
          end: stopIndex
        }
      }).then(res => {
        // console.log('loadMoreRows：', res)
        this.setState({
          list: [...this.state.list, ...res.data.body.list]
        })

        // 数据加载完成时，调用 resolve 即可
        resolve()
      })
    })
  }
// 渲染列表数据
  renderList() {
    const { count, isLoading } = this.state
    // 关键点：在数据加载完成后，再进行 count 的判断
    // 解决方式：如果数据加载中，则不展示 NoHouse 组件；而，但数据加载完成后，再展示 NoHouse 组件
    if (count === 0 && !isLoading) {
      return <NoHouse>没有找到房源，请您换个搜索条件吧~</NoHouse>
    }
    return (
      <InfiniteLoader
        isRowLoaded={this.isRowLoaded}
        loadMoreRows={this.loadMoreRows}
        rowCount={count}
      >
        {({ onRowsRendered, registerChild }) => (
          <WindowScroller>
            {({ height, isScrolling, scrollTop }) => (
              <AutoSizer>
                {({ width }) => (
                  <List
                    onRowsRendered={onRowsRendered}
                    ref={registerChild}
                    autoHeight // 设置高度为 WindowScroller 最终渲染的列表高度
                    width={width} // 视口的宽度
                    height={height} // 视口的高度
                    rowCount={count} // List列表项的行数
                    rowHeight={120} // 每一行的高度
                    rowRenderer={this.renderHouseList} // 渲染列表项中的每一行
                    isScrolling={isScrolling}
                    scrollTop={scrollTop}
                  />
                )}
              </AutoSizer>
            )}
          </WindowScroller>
        )}
      </InfiniteLoader>
    )
  }
    render(){
            const { count, isLoading } = this.state
            if (count === 0 && !isLoading) {
        return <NoHouse>没有找到房源，请您换个搜索条件吧~</NoHouse>
    }
        return(
            <div>
                <Flex className="header">
                    <i className="iconfont icon-back" onClick={()=>this.props.history.go(-1)}></i>
                    <SearchHeader cityName={this.label}></SearchHeader>
                </Flex>
                 {/* 条件筛选栏 */}
                <Sticky height={40}>
                    <Filter onFilter={this.onFilter}/>
                </Sticky>
                {/* 房屋列表区域 */}
                <div className='houseItmes'>
                    {this.renderList()}
                </div>
            </div>
        )
    }
}